/*
* Created on Tue Jun 13 2023 by Admin
*
* Copyright (c) 2023 shuangdi
*
* description: index2
*
* date: 2025/9/12
*/
<template>
  <div class="root">
    <div class="left_box"></div>
    <div class="center_box">
      <div class="img_a img1">
        <img src="../assets/images/photo/1.png" alt="">
      </div>
      <div class="img_a img2">
        <img src="../assets/images/photo/2.png" alt="">
      </div>
      <div class="img_a img3">
        <img src="../assets/images/photo/3.png" alt="">
      </div>
      <div class="img_a img4">
        <img src="../assets/images/photo/4.png" alt="">
      </div>
      <div class="canvas_box">
        <canvas id="myCanvas" width="493" height="774" ref="myCanvas"></canvas>
      </div>
      <div class="img_a img5">
        <img src="../assets/images/photo/5.png" alt="">
      </div>
      <div class="img_a img6">
        <img src="../assets/images/photo/6.png" alt="">
      </div>
      <div class="img_a img7">
        <img src="../assets/images/photo/7.png" alt="">
      </div>
      <div class="img_a img8">
        <img src="../assets/images/photo/8.png" alt="">
      </div>
      <div class="img_a img9">
        <img src="../assets/images/photo/9.png" alt="">
      </div>
    </div>
    <div class="right_box"></div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";

const myCanvas = ref()
let imgBox = [
  {src: new URL('../assets/images/photo/1.png', import.meta.url).href, x: 13, y: 261},
  {src: new URL('../assets/images/photo/2.png', import.meta.url).href, x: 2, y: 408},
  {src: new URL('../assets/images/photo/3.png', import.meta.url).href, x: 0, y: 562},
  {src: new URL('../assets/images/photo/4.png', import.meta.url).href, x: 176, y: 166},
  {src: new URL('../assets/images/photo/5.png', import.meta.url).href, x: 342, y: 0},
  {src: new URL('../assets/images/photo/6.png', import.meta.url).href, x: 314, y: 300},
  {src: new URL('../assets/images/photo/7.png', import.meta.url).href, x: 30, y: 0},
  {src: new URL('../assets/images/photo/8.png', import.meta.url).href, x: 20, y: 0},
  {src: new URL('../assets/images/photo/9.png', import.meta.url).href, x: 275, y: 569}
]

// 初始化canvas
function initCanvas() {
  let ctx = myCanvas.value.getContext('2d');
  for (let i = 0; i < imgBox.length; i++) {
    const img = new Image();
    img.src = imgBox[i].src;
    img.onload = () => {
      ctx.drawImage(img, imgBox[i].x, imgBox[i].y);
    }
  }
}

onMounted(() => {
  initCanvas()
})
</script>

<style scoped lang="less">
.root {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("@/assets/images/bg/bg.png");
  background-repeat: no-repeat;
  background-size: cover;

  .left_box {
    width: calc((100% - 1200px) / 2);
    height: 100%;
  }

  .center_box {
    width: 1200px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: gray;
    position: relative;

    .img_a {
      position: absolute;
      width: 200px;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        scale: 0.4;
      }

      &.img1 {
        top: 100px;
        left: 50px;
      }

      &.img2 {
        top: 300px;
        left: 50px;
      }

      &.img3 {
        top: 600px;
        left: 50px;
      }

      &.img4 {
        top: 800px;
        left: 50px;
      }

      &.img5 {
        top: 100px;
        right: 50px;
      }

      &.img6 {
        top: 250px;
        right: 50px;
      }

      &.img7 {
        top: 450px;
        right: 50px;
      }

      &.img8 {
        top: 600px;
        right: 50px;
      }

      &.img9 {
        top: 800px;
        right: 50px;
      }
    }


    .canvas_box {
      width: 667px;
      height: 897px;
      position: relative;
      background-image: url("@/assets/images/photo/拼图1.png");

      #myCanvas {
        width: 493px;
        height: 774px;
        //background-image: url("@/assets/images/photo/拼图.png");
        position: absolute;
        top: 73px;
        left: 91px;

        .img_b {
          position: absolute;
          width: 200px;
          height: 200px;
          display: flex;
          justify-content: center;
          align-items: center;

          &.img1 {
            top: 100px;
            left: 50px;
          }

          &.img2 {
            top: 300px;
            left: 50px;
          }

          &.img3 {
            top: 600px;
            left: 50px;
          }

          &.img4 {
            top: 800px;
            left: 50px;
          }

          &.img5 {
            top: 100px;
            right: 50px;
          }

          &.img6 {
            top: 250px;
            right: 50px;
          }

          &.img7 {
            top: 450px;
            right: 50px;
          }

          &.img8 {
            top: 600px;
            right: 50px;
          }

          &.img9 {
            bottom: 0px;
            right: 0px;
          }
        }
      }
    }
  }

  .right_box {
    width: calc((100% - 1000px) / 2);
    height: 100%;
  }
}
</style>
